<template>
  <div id="app">
    <!-- 这个是vue-router提供的元素，专门用来当做占位符的 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <!-- <transition mode="out-in">
        <router-view />
      </transition> -->
    <router-view />
  </div>
</template>
<script>

export default {

}
</script>
<style>
#app {
  height: 100%;
}
/*元素的起始状态，此时还没有开始进入*/
.v-enter {
  opacity: 0;
  transition: translateX(150px);
}

/*离开的终止状态，此时动画已经结束*/
.v-leave-to {
  opacity: 0;
  transition: translateX(120px);
}

/*入场动画的动作*/
.v-enter-active {
  transition: all 0.5s ease;
}

/*离场动画的动作*/
.v-leave-active {
  transition: all 0.5s ease;
}
</style>
